<template>
	<view class="box">
			<uNavbar title="提取" bgColor="#E0DDDA" leftIconColor="#333333" :titleStyle="titleStyle" ></uNavbar>

		<view class="card">

			<text class="title">提取金额</text>
			<view class="main_wrap">
				<text>￥</text>
				<input type="number" :value="num" placeholder="" @input="getnum" />
			</view>
			<view class="divider" />
			<view class="main_bottom">
				<text>可提交易余额￥{{info.phone_balance}}</text>
				<view class="main_bottom_txt" @click="num=info.phone_balance">
					全部提取
				</view>
			</view>
			<view class="main_bottom">
				<text>到账金额￥{{daozhangprice}}</text>
			</view>
		</view>
		<view class="tip">
			<rich-text class="s" :nodes="nodeCentent"></rich-text>
		</view>
		<view class="btn" :class="{active:canTip}" @click="tip">
			确认提取
		</view>
		<u-popup :show="showpass" mode="center" @close="close()" closeable bgColor="transparent">
			<view class="pass_box flex_ZC">
				<text class="pwd_tit">请输入交易密码</text>
				<u-code-input disabledDot :adjustPosition="false" borderColor="#A68A64" focus class="code_input"
					v-model="password" mode="line" dot></u-code-input>
				<view class="pwd_box flex_ld">
					<text class="other_btn1 flex_c" @click="close()">取消</text>
					<text class="other_btn2 flex_c" @click="submit()">确认</text>
				</view>
			</view>
		</u-popup>

	</view>

</template>

<script>
	import NP from 'number-precision'
	import {myAccount,phoneConfig,phoneIndexInfo,phoneBalanceWithdrawal } from '../../api/myphone.js'
	let timer = null
	export default {
		data() {
			return {
				num: 0,
				tipShow: false,
				canDrawal: true,//是否能调用提现接口
				canTip: false, //点击提现是否弹出密码输入框(根据提现金额,规则接口是否正确返回)
				info: {
					phone_balance: '0.00',
					fee: 1,
					front_fee: '1',
					after_fee: '1',
					rule: '规则说明:待更新',
					isComplete: 0, //status=(0,4完成前 | 1,2,3,5,6完成后)
				},
				showpass: false,
				password: "",
				nodeCentent: '',
				titleStyle: {
					color: '#333333'
				},
			}
		},
		onLoad() {
			this.getAllData()
		},
		computed: {
			daozhangprice() {
				const price = Number(this.num)
				const fee = Number(this.info.fee)
				console.log(price);
				console.log(fee);
				return NP.divide(price, fee).toFixed(2)
			}
		},
		methods: {

			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			getAllData() {
				this.canTip = false
				//接口存在前后依赖关系 全部请求 减少请求时间
				Promise.allSettled([
					myAccount(),
					phoneConfig(),
					phoneIndexInfo()
				]).then(res => {
					console.log(res);
					if (res[0].status == 'rejected' || res[1].status == 'rejected' || res[2].status =='rejected') {
						this.canTip = false
					} else {
						this.canTip = true
						if (res[0].value.code == 1) {
							let account = res[0].value
							this.info.phone_balance = account.data.phone_balance
						}
						if (res[1].value.code == 1) {
							let config = res[1].value
							this.nodeCentent = config.data.rule_explain.replace(/\r\n/g, "<p/>") || '';
							this.info.front_fee = config.data.complete_front_rought_proportion
							this.info.after_fee = config.data.complete_after_rought_proportion
						}
						if (res[2].value.code == 1) {
							let phoneIndex = res[2].value
							this.info.isComplete = phoneIndex.data.member_phone.status
							if (this.info.isComplete == 0 || this.info.isComplete == 4) {
								this.info.fee = this.info.front_fee
							} else {
								this.info.fee = this.info.after_fee
							}
						}
					}

				}).catch(err => {
					console.log('走这里............');
					this.canTip = false
				})
			},
			tip() {
				console.log(this.canTip);
				console.log(this.num);
				if (this.canTip) {
					if (this.num == 0) {
						uni.$u.toast("提取金额不能为0")
					} else if (Number(this.num) > Number(this.info.phone_balance)) {
						uni.$u.toast("余额不足")
					} else {
						this.canDrawal = true
						this.showpass = true
					}
				} else {
					//uni.$u.toast('提现数据异常,请刷新重试')
				}
			},
			submit() {
				if (this.canDrawal) {
					if (this.password.length < 6) {
						uni.$u.toast("请输入完整密码")
					} else {
						this.canDrawal = false
						uni.showLoading({
							title: "加载中",
							mask: true
						})
						phoneBalanceWithdrawal({
							price: this.num,
							password: this.password,
						}).then(res => {
							uni.hideLoading()
							if (res.code == 1) {
								this.num = 0
								this.getAllData()
							}
							this.close()
							uni.$u.toast(res.msg)
						})
						.catch(err => {
							uni.hideLoading()
							this.canDrawal = true
						})
					}
				}

			},
			right() {

			},
			close() {
				this.showpass = false
				this.password = ""
				setTimeout(() => {
					this.canDrawal = true
				},500)
			},
			getnum(e) {
				this.num = e.detail.value
			},
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	/deep/ .u-navbar__content__right__text {
		color: #666;
	}

	.box {
		width: 100%;
		min-height: 100vh;
		background: #E0DDDA;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0rpx 28rpx;
	}

	.card {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		box-sizing: border-box;
		padding: 32rpx 42rpx;
		margin-top: 56rpx;
		background: #F2F2F2;
		background-position: center;
		background-repeat: no-repeat;

	}

	.title {
		font-size: 32rpx;
		color: #333333;
	}

	.main_wrap {
		width: 598rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		display: flex;
		align-items: flex-end;

		>text {
			font-weight: 400;
			font-size: 72rpx;
			color: #333333;
			margin-bottom: 16rpx;
		}

		.price_wrap {

			font-weight: 400;
			font-size: 108rpx;
			color: #333333;
		}

		>input {
			font-weight: 400;
			font-size: 108rpx;
			color: #333333;
		}
	}

	.main_bottom {
		width: 598rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;

		>text {
			font-size: 26rpx;
			color:#666666;
			;
		}

		.main_bottom_txt {
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			margin-left: 20rpx;
		}
	}

	.divider {
		width: 600rpx;
		margin: 24rpx auto;
		height: 4rpx;
		background: #A68A6430;
	}

	.tip {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		box-sizing: border-box;
		padding: 0rpx 12rpx;
		margin-top: 84rpx;

		>text {
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
		}
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		background: #A68A64;
		border-radius:10rpx;
		text-align: center;
		line-height: 88rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #ffffff;
		margin-top: 150rpx;
	}

	.active {
		color: #FFFFFF;
	}

	.s {
		color: #333333;
	}

	.pass_box {
		width: 602rpx;
		height: 406rpx;
	    background: #E0DDDA;
	    border-radius: 12px 12px 12px 12px;
		border-radius: 20rpx;
		z-index: 8;

		.pwd_tit {
			width: 602rpx;
			text-align: center;
			font-size: 36rpx;
			color: #333333;
			padding-top: 50rpx;
			margin-bottom: 70rpx;
		}

		.code_input {
			margin: 0 auto;
		}

		.pwd_box {
			width: 522rpx;
			height: 72rpx;
			margin: 0 auto;
			margin-top: 50rpx;
		}

		.other_btn1 {
			width: 220rpx;
			height: 72rpx;
			border-radius: 280rpx 280rpx 280rpx 280rpx;
			border: 2rpx solid #A68A64;
			font-size: 28rpx;
			color: #A68A64;
			text-align: center;
			line-height: 72rpx;
		}
			
		.other_btn2 {
			width: 220rpx;
			height: 72rpx;
			background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
			border-radius: 280rpx 280rpx 280rpx 280rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 72rpx;
		}
	}
	
</style>